import React, { FC, useEffect, useRef } from "react";
import { useStyles } from "./style";

interface InputComponentProps {
  min?: number;
  max?: number;
  onChange: (v: any) => void;
  value?: number | undefined;
}

const InputNumber: FC<InputComponentProps> = (props) => {
  const classes = useStyles();
  const { onChange, value, min, max } = props;
  const inputRef = useRef<HTMLInputElement>(null);
  useEffect(() => {
    if (inputRef && inputRef?.current) {
      inputRef.current.value =
        typeof value === "undefined" ? "" : String(value);
    }
  }, [value]);
  const handleChange = (e: any) => {
    const val = Math.ceil(Math.abs(e.target.value));
    onChange(val);
  };
  return (
    <input
      ref={inputRef}
      type="number"
      min={min}
      max={max}
      className={classes.input}
      onChange={handleChange}
      role="input"
    />
  );
};

export default InputNumber;
